<template>
  <div id="MapView">
    <!-- <dv-full-screen-container id="main"> -->
    <TimeClock id="time-clock"></TimeClock>
    <div id="main">
      <!-- 头部 -->
      <div id="top-header">
        <dv-decoration-8 class="header-left" />
        <dv-decoration-5 class="header-center" />
        <dv-decoration-8 :reverse="true" class="header-right" />
        <div class="center-title">加砖信息街道养老数据平台</div>
        <!-- 全屏按钮 -->
        <!-- <span class="btn" @click="largeScreen('#bigscreen')">街道大屏</span> -->
        <div class="full-screen-btn">
          <el-link href="http://39.100.254.133:1200/" target="_blank"
            >居家大屏</el-link
          >
          <img
            src="../assets/fullscreen.png"
            alt=""
            @click="handleFullScreen"
          />
        </div>
        <!-- </dv-full-screen-container> -->
      </div>
      <!-- 内容 -->
      <div id="main-content">
        <!-- 左边 -->
        <div class="left-main">
          <!-- 开卡数据 -->
          <div class="cardOpenData">
            <div class="item">
              <dv-decoration-7 class="title"
                >&nbsp;"舒心养老"助餐开卡数&nbsp;</dv-decoration-7
              >
              <div class="num">
                <template v-for="(num, index) in numberCardOpenRecord">
                  <img :src="blueNumList[num]" :key="index" />
                </template>
              </div>
            </div>
            <p>张</p>
          </div>
          <!-- 优惠价格 -->
          <div class="favorPrice">
            <div class="item">
              <dv-decoration-7 class="title"
                >&nbsp;累计优惠金额&nbsp;</dv-decoration-7
              >
              <div class="num">
                <template v-for="(num, index) in cumuliPreferencePrice">
                  <img :src="blueNumList[num]" :key="index" />
                </template>
              </div>
            </div>
            <p>元</p>
          </div>
          <!-- 党员人数 -->
          <div class="numberPart">
            <div class="item">
              <dv-decoration-7 class="title"
                >&nbsp;党员人数&nbsp;</dv-decoration-7
              >
              <div class="num">
                <template v-for="(num, index) in numberPartMember">
                  <img :src="blueNumList[num]" :key="index" />
                </template>
              </div>
            </div>
            <p>人</p>
          </div>
        </div>
        <!-- 中间 -->
        <div class="center-main">
          <!-- 街道社区图 -->
          <div class="streetCommunity">
            <div id="streetCommunityChart"></div>
          </div>
          <!-- 未成年数据 -->
          <div class="juvenileData">
            <div class="item">
              <dv-decoration-7 class="title"
                >&nbsp;未成年人数&nbsp;</dv-decoration-7
              >
              <div class="content">
                <div id="juvenileDataChart"></div>
                <div
                  class="community-List"
                  v-if="communityListConfig.data.length > 0"
                >
                  <div class="table-title">
                    <p>{{ checkCom.name }}未成年人</p>
                    <p>
                      <template v-for="(num, index) in checkCom.num">
                        <img :src="blueNumList[num]" :key="index" />
                      </template>
                    </p>
                  </div>
                  <dv-scroll-board class="dvsb" :config="communityListConfig" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="right-main">
          <!-- 老人数据 -->
          <div class="olderPerson">
            <div class="item">
              <dv-decoration-7 class="title"
                >&nbsp;长者数据&nbsp;</dv-decoration-7
              >
              <div id="olderPersonChart"></div>
            </div>
          </div>
          <!-- 订单类型 -->
          <div class="orderTyp">
            <div class="item">
              <dv-decoration-7 class="title"
                >&nbsp;订单类型&nbsp;</dv-decoration-7
              >
              <div id="orderTypChart"></div>
              <p>单</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div id="bottom-content">
        <footer>
          <!-- 助餐 -->
          <div class="item">
            <dv-decoration-7 class="title">&nbsp;助餐&nbsp;</dv-decoration-7>
            <div class="num">
              <template v-for="(num, index) in orderListData.helpMeal">
                <img :src="blueNumList[num]" :key="index" />
              </template>
            </div>
          </div>
          <!-- 助浴 -->
          <div class="item">
            <dv-decoration-7 class="title">&nbsp;助浴&nbsp;</dv-decoration-7>
            <div class="num">
              <template v-for="(num, index) in orderListData.assistBath">
                <img :src="blueNumList[num]" :key="index" />
              </template>
            </div>
          </div>
          <!-- 助洁 -->
          <div class="item">
            <dv-decoration-7 class="title">&nbsp;助洁&nbsp;</dv-decoration-7>
            <div class="num">
              <template v-for="(num, index) in orderListData.helpClean">
                <img :src="blueNumList[num]" :key="index" />
              </template>
            </div>
          </div>
          <!-- 助急 -->
          <div class="item">
            <dv-decoration-7 class="title">&nbsp;助急&nbsp;</dv-decoration-7>
            <div class="num">
              <template v-for="(num, index) in orderListData.helpUrgent">
                <img :src="blueNumList[num]" :key="index" />
              </template>
            </div>
          </div>
          <!-- 助行 -->
          <div class="item">
            <dv-decoration-7 class="title">&nbsp;助行&nbsp;</dv-decoration-7>
            <div class="num">
              <template v-for="(num, index) in orderListData.assistWalk">
                <img :src="blueNumList[num]" :key="index" />
              </template>
            </div>
          </div>
          <!-- 助医 -->
          <div class="item">
            <dv-decoration-7 class="title">&nbsp;助医&nbsp;</dv-decoration-7>
            <div class="num">
              <template v-for="(num, index) in orderListData.assistDoctor">
                <img :src="blueNumList[num]" :key="index" />
              </template>
            </div>
          </div>
          <!-- 助康 -->
          <div class="item">
            <dv-decoration-7 class="title">&nbsp;助康&nbsp;</dv-decoration-7>
            <div class="num">
              <template v-for="(num, index) in orderListData.helpHealth">
                <img :src="blueNumList[num]" :key="index" />
              </template>
            </div>
          </div>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
import cityGeoJson from "../../public/json/闲林.json";
import TimeClock from "../components/TimeClock.vue";
export default {
  name: "MapView",
  data() {
    return {
      // 开卡记录数
      numberCardOpenRecord: [7, 5, 6, 0, 5],
      // 累计优惠价格
      cumuliPreferencePrice: [5, 6, 1, 9, 9, 1],
      // 党员人数
      numberPartMember: [2, 2, 4, 5],
      // 全屏隐藏按钮
      fullscreen: false,
      // 选择的社区
      checkCom: {
        name: "竹韵社区",
        num: [4, 5, 0, 0],
      },
      // 社区列表配置项
      communityListConfig: {
        oddRowBGC: "",
        evenRowBGC: "",
        rowNum: 5,
        data: [],
      },
      // 服务订单数据
      orderListData: {
        // 助餐
        helpMeal: [8, 9],
        // 助浴
        assistBath: [3, 7, 1],
        // 助洁
        helpClean: [1, 2, 8, 9, 0],
        // 助急
        helpUrgent: [4, 6],
        // 助行
        assistWalk: [3, 4, 2],
        // 助医
        assistDoctor: [2, 2, 9],
        // 助康
        helpHealth: [7, 5],
      },
      // 余杭区闲林街道的地理信息
      cityGeoJson,
      // 地图的icon
      mapSymbol: require("../assets/icon.png"),
      mapSymbolAc: require("../assets/icon-ac.png"),
      // 绿色的数字
      greenNumList: [
        require("../assets/num/gNum_0.png"),
        require("../assets/num/gNum_1.png"),
        require("../assets/num/gNum_2.png"),
        require("../assets/num/gNum_3.png"),
        require("../assets/num/gNum_4.png"),
        require("../assets/num/gNum_5.png"),
        require("../assets/num/gNum_6.png"),
        require("../assets/num/gNum_7.png"),
        require("../assets/num/gNum_8.png"),
        require("../assets/num/gNum_9.png"),
      ],
      // 蓝色的数字
      blueNumList: [
        require("../assets/num/bNum_0.png"),
        require("../assets/num/bNum_1.png"),
        require("../assets/num/bNum_2.png"),
        require("../assets/num/bNum_3.png"),
        require("../assets/num/bNum_4.png"),
        require("../assets/num/bNum_5.png"),
        require("../assets/num/bNum_6.png"),
        require("../assets/num/bNum_7.png"),
        require("../assets/num/bNum_8.png"),
        require("../assets/num/bNum_9.png"),
      ],
    };
  },
  mounted() {
    this.getStaticData("竹韵社区", "normal");
    // this.getOrderData();
    this.streetCommunityChartFun();
    this.orderTypChartFun();
    // let _this = this;
    // window.onresize = function () {
    //   _this.chart.resize();
    // };
    var myChart = this.$echarts.init(document.getElementById("orderTypChart"));
    var myChartA = this.$echarts.init(
      document.getElementById("juvenileDataChart")
    );
    var myChartB = this.$echarts.init(
      document.getElementById("olderPersonChart")
    );
    var myChartC = this.$echarts.init(
      document.getElementById("streetCommunityChart")
    );
    window.onresize = function () {
      myChart.resize();
      myChartA.resize();
      myChartB.resize();
      myChartC.resize();
    };
  },
  methods: {
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      // 判断是否已经是全屏
      // 如果是全屏，退出
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 否则，进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      // 改变当前全屏状态
      this.fullscreen = !this.fullscreen;
    },
    // 获取页面数据
    getStaticData(community, type, chartDom) {
      const formdata = new FormData();
      formdata.append("community", community);
      this.$axios.post("/staticdata/getStaticData", formdata).then((res) => {
        if (res.data.code == 200) {
          // 无数据
          if (res.data.item.length == 0) {
            this.$message.warning("该社区暂无数据");
            return;
          }
          const comData = res.data.item[0];
          // 选中的社区
          this.checkCom.name = comData.community;
          // 如果是点击社区 销毁图表
          if (type == "destroyed") {
            // 渲染街道图表
            this.$echarts.init(chartDom).dispose(); //删除之前绘画的实例
            this.streetCommunityChartFun();
          }
          // 青少年总人数
          this.checkCom.num = (
            parseInt(comData.children) + parseInt(comData.juvenile)
          )
            .toString()
            .split("");
          // 渲染未成年数据图表
          this.juvenileDataChartFun(comData.children, comData.juvenile);
          // 渲染长者数据图表
          this.olderPersonChartFun(comData);
          // 更新社区列表
          this.communityListConfig.data = [];
          this.getComList();
        }
      });
    },
    // 获取社区列表项
    getComList() {
      this.$axios.post("/staticdata/getStaticData").then((res) => {
        if (res.data.code == 200) {
          // 所有的社区列表
          let arr,
            i,
            cardCount = 0,
            totalMoney = 0,
            personNum = 0;
          arr = res.data.item.map((el, index) => {
            // 开卡记录数
            cardCount += el.cardCount * 1;
            // 累计优惠价格
            totalMoney += el.totalDiscount * 1;
            // 党员人数
            personNum += el.partMember * 1;
            if (this.checkCom.name == el.community) i = index;
            return [el.community, el.children * 1 + el.juvenile * 1];
          });
          // 开卡记录数
          this.numberCardOpenRecord = cardCount.toString().split("");
          // 累计优惠价格
          this.cumuliPreferencePrice = totalMoney.toString().split("");
          // 党员人数
          this.numberPartMember = personNum.toString().split("");
          // 去除已被选择的
          arr.splice(i, 1);
          // 页面渲染
          this.communityListConfig.data = arr;
        }
      });
    },
    // 获取订单数据
    getOrderData() {
      const formdata = new FormData();
      formdata.append("community", "竹韵社区");
      this.$axios.post("/globalStatist/orderStatist", formdata).then((res) => {
        if (res.data.code == 200) {
          // 渲染订单类型图表
          this.orderTypChartFun(res.data.item);
          // 页面赋值
          const data = res.data.item;

          this.orderListData.helpMeal = data.helpMeal.toString().split("");
          this.orderListData.assistBath = data.helpBath.toString().split("");
          this.orderListData.helpClean = data.helpClean.toString().split("");
          this.orderListData.helpUrgent = data.helpHurry.toString().split("");
          this.orderListData.assistWalk = data.helpWalk.toString().split("");
          this.orderListData.assistDoctor = data.helpMedic.toString().split("");
          this.orderListData.helpHealth = data.helpHealth.toString().split("");
        }
      });
    },
    // 渲染订单类型图表
    orderTypChartFun() {
      this.$nextTick(() => {
        var chartDom = document.getElementById("orderTypChart");
        var myChart = this.$echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {},
          grid: {
            left: "3%",
            right: "4%",
            top: "8%",
            bottom: "4%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            inverse: true,
            axisLabel: {
              textStyle: {
                show: true,
                color: "#fff",
              },
            },
          },
          yAxis: {
            type: "category",
            inverse: true,
            axisLabel: {
              textStyle: {
                show: true,
                color: "#fff",
              },
            },
            data: ["助餐", "助浴", "助洁", "助急", "助行", "助医", "助康"],
          },
          series: [
            {
              label: {
                color: "#fff",
              },
              realtimeSort: true,
              type: "bar",
              // data: [
              //   data.helpMeal,
              //   data.helpBath,
              //   data.helpClean,
              //   data.helpHurry,
              //   data.helpWalk,
              //   data.helpMedic,
              //   data.helpHealth,
              // ],
              data: [89, 371, 12890, 46, 342, 229, 75],
            },
          ],
        };

        option && myChart.setOption(option);
      });
    },
    // 渲染未成年数据图表
    juvenileDataChartFun(children, juvenile) {
      this.$nextTick(() => {
        var chartDom = document.getElementById("juvenileDataChart");
        this.$echarts.init(chartDom).dispose(); //删除之前绘画的实例
        var myChart = this.$echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
            textStyle: {
              color: "#fff",
            },
          },
          series: [
            {
              type: "pie",
              radius: "100%",
              color: ["#15fdfa", "#6cb0ff"],
              label: {
                color: "#fff",
                formatter: "{b}，共{c}人",
              },
              labelLine: {
                length: 0, //调整上下位置
              },
              data: [
                { value: children, name: "0-3岁" },
                { value: juvenile, name: "4-16岁" },
              ],
            },
          ],
        };

        option && myChart.setOption(option);
      });
    },
    // 渲染长者数据图表
    olderPersonChartFun(comData) {
      const { disable, emptyNest, liveAlong, elder } = comData;
      this.$nextTick(() => {
        var chartDom = document.getElementById("olderPersonChart");
        this.$echarts.init(chartDom).dispose(); //删除之前绘画的实例
        var myChart = this.$echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: "item",
          },
          legend: {
            show: false,
            orient: "vertical",
            left: "right",
            textStyle: {
              color: "#fff",
            },
            data: ["空巢", "独居", "残疾"],
          },
          series: [
            {
              name: "长者人数",
              silent: true,
              type: "pie",
              radius: 0,
              label: {
                position: "inner",
                fontSize: 14,
                color: "#fff",
                formatter: "{b}\n{c}人",
              },
              color: "#839cae",
              data: [{ value: elder, name: "60岁以上" }],
            },
            {
              name: "长者类型",
              type: "pie",
              radius: ["40%", "70%"],
              label: {
                fontSize: 14,
                color: "#fff",
                formatter: "{b}，共{c}人",
              },
              labelLine: {
                length: 0, //调整上下位置
              },
              color: ["#15fdfa", "#6cb0ff", "#9da215"],
              data: [
                { value: disable, name: "残疾" },
                { value: emptyNest, name: "空巢" },
                { value: liveAlong, name: "独居" },
              ],
            },
          ],
        };

        option && myChart.setOption(option);
      });
    },
    // 渲染街道图表
    streetCommunityChartFun() {
      // 当前选中的社区
      const comName = this.checkCom.name;
      this.$nextTick(() => {
        // 渲染余杭区
        this.$echarts.registerMap("china", cityGeoJson);
        var chartDom = document.getElementById("streetCommunityChart");
        // this.$echarts.init(chartDom).dispose(); //删除之前绘画的实例
        var myChart = this.$echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: "item",
          },

          geo: {
            map: "china",
            roam: "scale",
            itemStyle: {
              areaColor: "#15fdfa",
              borderColor: "#0E8FD7",
              color: "#fff",
            },
            emphasis: {
              label: {
                color: "#000",
              },
              itemStyle: {
                areaColor: "#15fdfa",
              },
            },
            center: [119.99381303787231, 30.22115747651668],
            // top: 100,
            left: 140,
            // right: 150,
            bottom: -200,
            zoom: 125,
            label: {
              color: "#000",
            },
          },
          series: [
            {
              type: "scatter",
              map: "china",
              coordinateSystem: "geo",
              legendHoverLink: true, //是否启用图例 hover 时的联动高亮。
              symbol: (value) => {
                if (value[2] == comName) {
                  return "image://" + this.mapSymbolAc; //竹韵
                } else {
                  return "image://" + this.mapSymbol; //其他
                }
              },
              symbolOffset: [0, "-50%"], //向上偏移
              encode: {
                value: 2,
              },
              symbolSize: (value) => {
                if (value[2] == comName) {
                  return 34; //竹韵
                } else {
                  return 26; //其他
                }
              },
              data: [
                [120.019179, 30.242188, "翡翠社区"],
                [119.991009, 30.243599, "竹韵社区"],
                [119.987696, 30.223245, "方家山社区"],
                [119.962105, 30.211592, "孙家坞社区"],
                [120.011907, 30.243946, "华丰社区"],
                [119.996881, 30.221203, "北山社区"],
                [120.003926, 30.209871, "良睦社区"],
                [120.008336, 30.233925, "山水社区"],
                [120.013527, 30.251595, "华溪社区"],
                [120.018872, 30.253718, "何母桥村"],
                [119.997272, 30.234342, "民丰村"],
                [119.97795, 30.24319, "万景村"],
                [119.98606, 30.21956, "联荣村"],
                [119.98428, 30.22157, "闲林村"],
                [119.990125, 30.20242, "西溪源村"],
                [119.95798, 30.17939, "云栖村"],
                [119.96767, 30.1847, "桦树村"],
              ],
              label: {
                show: true,
                textStyle: {
                  color: "#ff0000",
                  fontWeight: 600,
                }, //标签的样式
                position: "top",
                formatter: function (param) {
                  if (param.value[2] == comName) {
                    return param.value[2];
                  } else {
                    return "";
                  }
                },
              },
              tooltip: {
                formatter: function (params) {
                  return params.data[2];
                },
              },
            },
          ],
        };

        const that = this;
        myChart.on("click", function (params) {
          const { value } = params;
          // 如果点击的是整图
          if (params.componentType == "geo") {
            that.clickGeo();
          } else {
            // console.log(that.checkCom.name);
            // that.$echarts.init(chartDom).dispose(); //删除之前绘画的实例
            that.clickSeries(value, chartDom);
          }
        });

        option && myChart.setOption(option);
      });
    },
    // 点击散点图
    clickSeries(community, chartDom) {
      if (this.checkCom.name == community[2]) return;
      // 切换数据源
      this.getStaticData(community[2], "destroyed", chartDom);
      // 渲染街道图表
      // console.log(this.checkCom.name);
      // this.$echarts.init(chartDom).dispose(); //删除之前绘画的实例
      // this.streetCommunityChartFun();
      // this.$echarts.init(chartDom).dispose(); //删除之前绘画的实例
      // this.streetCommunityChartFun();
    },
    // 点击整图
    clickGeo() {},
  },
  components: {
    TimeClock,
  },
};
</script>

<style lang="less" scoped>
#MapView {
  max-width: 3060px;
  margin: 0 auto;
  min-height: 100vh;
  background: radial-gradient(#0c4970, #0a1647);
  position: relative;
  #time-clock {
    height: 200px;
    width: 2800px;
    position: absolute;
    top: 390px;
    left: 300px;
  }
  #main {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    #top-header {
      position: relative;
      width: 100%;
      flex: 0.5;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      z-index: 2;
      .header-left {
        width: 25%;
        height: 60px;
        margin-left: 2%;
        /deep/ svg {
          > polyline:last-child {
            display: none !important;
          }
        }
      }
      .header-right {
        width: 25%;
        height: 60px;
        margin-right: 2%;
        /deep/ svg {
          > polyline:last-child {
            display: none !important;
          }
        }
      }
      .header-center {
        width: 40%;
        height: 60px;
        margin-top: 50px;
      }
      .center-title {
        position: absolute;
        font-size: 44px;
        font-weight: 700;
        left: 50%;
        top: 10px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        color: #15fdfa;
      }
    }
    #main-content {
      flex: 3;
      display: flex;
      color: #fff;
      font-size: 18px;
      z-index: 2;
      > .left-main {
        flex: 0.8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        > .cardOpenData,
        > .favorPrice,
        > .numberPart {
          width: 100%;
          height: 25%;
          background-image: url("../assets/border.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: flex-end;
          > .item {
            width: 80%;
            height: 80%;
            position: absolute;
            top: 15px;
            left: 25px;
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            > .title {
              width: 100%;
              flex: 1;
              font-weight: 600;
              -webkit-text-stroke: 0.5px #000;
            }

            > .num {
              flex: 2.5;
              display: flex;
              flex-wrap: nowrap;
              align-items: center;
              margin-bottom: 20px;
              > img {
                width: 34px;
                height: 40px;
                padding: 0 5px;
              }
            }
          }
          > p {
            font-weight: 600;
            -webkit-text-stroke: 0.5px #000;
            font-size: 0.12rem;
            margin-right: 0.4rem;
            margin-bottom: 30px;
          }
        }
      }
      > .center-main {
        flex: 2.5;
        display: flex;
        > .juvenileData {
          width: 50%;
          height: 100%;
          position: relative;
          > .item {
            width: 100%;
            height: 80%;
            display: flex;
            flex-direction: column;
            margin-top: 20%;
            > .title {
              width: 150px;
              height: 30px;
              height: 5%;
              font-weight: 600;
              -webkit-text-stroke: 0.5px #000;
            }
            > .content {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              #juvenileDataChart {
                width: 100%;
                height: 30%;
              }
              .community-List {
                width: 100%;
                height: 70%;
                margin-top: 50px;
                > table {
                  width: 100%;
                  height: 60%;
                  > tr {
                    > td {
                      width: 10%;
                      font-weight: 600;
                      font-size: 30px;
                      -webkit-text-stroke: 0.5px #000;
                      > .num {
                        display: flex;
                        flex-wrap: nowrap;
                        > img {
                          padding: 0 5px;
                        }
                      }
                    }
                    &:not(&:first-child) {
                      > td {
                        font-weight: 600;
                        font-size: 16px;
                        -webkit-text-stroke: 0.5px #000;
                        > .num {
                          display: flex;
                          flex-wrap: nowrap;
                          > img {
                            zoom: 0.4;
                          }
                        }
                      }
                    }
                    &:last-child {
                      text-align: center;
                    }
                  }
                }
                > .table-title {
                  width: 100%;
                  display: flex;
                  justify-content: space-around;
                  margin-bottom: 20px;
                  > p {
                    width: 50%;
                    font-size: 32px;
                    font-weight: 600;
                    > img {
                      width: 28px;
                      padding: 0 5px;
                    }
                  }
                }
                /deep/ .dvsb {
                  width: 100%;
                  height: 60%;
                  > .rows {
                    > .row-item {
                      > .ceil {
                        font-family: "微软雅黑";
                        &:last-child {
                          color: #15fdfa !important;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        > .streetCommunity {
          width: 50%;
          height: 100%;
          display: flex;
          justify-content: center;
          #streetCommunityChart {
            width: 100%;
            height: 100%;
          }
          > .dvfc {
            width: 700px;
            height: 280px;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: auto;
          }
        }
      }
      > .right-main {
        flex: 0.8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        > .olderPerson,
        > .orderTyp {
          width: 100%;
          height: 44%;
          background-image: url("../assets/border.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          position: relative;
          > .item {
            // width: 320px;
            // height: 245px;
            width: 85%;
            height: 90%;
            position: absolute;
            top: 25px;
            left: 25px;
            > .title {
              width: 150px;
              height: 30px;
              font-weight: 600;
              -webkit-text-stroke: 0.5px #000;
            }
            #olderPersonChart,
            #orderTypChart {
              width: 100%;
              height: 100%;
            }
            > p {
              font-size: 14px;
              width: 100%;
              text-align: right;
              position: absolute;
              bottom: -22px;
              right: -16px;
            }
          }
        }
      }
    }
    #bottom-content {
      flex: 0.7;
      width: 100%;
      font-size: 22px;
      color: #fff;
      z-index: 2;
      > footer {
        height: 100%;
        width: 100%;
        display: flex;
        margin-top: 20px;
        > .item {
          flex: 1;
          display: flex;
          align-items: center;
          flex-direction: column;
          > .title {
            width: 150px;
            height: 30px;
            font-weight: 600;
            -webkit-text-stroke: 0.6px #000;
          }
          > .num {
            margin: 20px 15px;
            display: flex;
            flex-wrap: nowrap;
            align-items: flex-end;
            > img {
              padding: 0 5px;
            }
          }
        }
      }
    }

    .full-screen-btn {
      display: flex;
      align-items: center;
      // position: fixed;
      // top: 50px;
      margin-right: 12px;
      z-index: 2;
      cursor: pointer;
      .el-link {
        color: #fff;
        margin-right: 20px;
      }
      > img {
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>
